<template>
    <el-form-item
        class="widget-view"
        v-if="element && element.key"
        :class="{active: selectWidget.key == element.key, 'is_req': element.options.required}"
        @click.native.stop="handleSelectWidget(index)"
    >
        <template v-if="element.type=='BaseTitle'">
            <h4
                @click="goLink(element.options.linkType, element.options.linkUrl, element.options.query)"
                :style="{
                    'display': element.options.inline ? 'inline-block': 'block',
                    'text-align': element.options.textAlign,
                    'color': element.options.color,
                    'font-size': element.options.fontSize,
                    'font-weight': element.options.Weight,
                    'margin-left': element.options.marginLeft,
                    'margin-right': element.options.marginRight,
                    'height': element.options.height,
                    'line-height': element.options.lineHeight,}"
            >
                {{ element.options.defaultValue }}
            </h4>
        </template>
        <template v-if="element.type=='BaseImg'">
            <van-cell
                :style="{
                    'text-align': element.options.textAlign,
                    'background-color': element.options.backgroundColor
            }">
                <van-image
                    :radius="element.options.borderRadius"
                    :width="element.options.width"
                    :height="element.options.height"
                    :src="element.options.defaultValue"
                />
            </van-cell>
        </template>
        <template v-if="element.type == 'BaseInput'">
            <van-field
                v-model="element.options.defaultValue"
                required
                clearable
                :label="element.name"
                :placeholder="element.options.placeholder"
            />
        </template>

        <template v-if="element.type == 'BaseTextarea'">
            <van-field
                v-model="element.options.defaultValue"
                required
                clearable
                :label="element.name"
                :placeholder="element.options.placeholder"
                rows="1"
                autosize
            />
        </template>

        <template v-if="element.type == 'BaseNumber'">
            <div class="van-cell">
                <div class="van-cell_title">{{ element.name }}</div>
                <div class="van-cell_value">
                    <van-stepper
                        v-model="element.options.defaultValue"
                        :disabled="element.options.disabled"
                        :min="element.options.min"
                        :max="element.options.max"
                        :step="element.options.step"
                    />
                </div>
            </div>
        </template>
        <template v-if="element.type == 'BasePassword'">
            <div class="van_cell">
                <div class="van_cell_title">{{ element.name }}</div>
                <div>
                    <van-password-input
                        :value="element.options.defaultValue"
                        info="密码为 6 位数字"
                    />
                </div>
            </div>
        </template>

        <template v-if="element.type == 'BaseRadio'">
            <div class="van_cell">
                <h3 class="van_cell_title">{{ element.name }}</h3>
                <van-radio-group v-model="element.options.defaultValue">
                    <van-cell v-for="(item, index) in element.options.options" :key="index">
                        <van-radio :name="item.value">{{ item.label }}
                        </van-radio>
                    </van-cell>
                </van-radio-group>
            </div>
        </template>

        <template v-if="element.type == 'BaseCheckbox'">
            <div class="van_cell">
                <h3 class="van_cell_title">{{ element.name }}</h3>
                <van-checkbox-group v-model="element.options.defaultValue">
                    <van-cell v-for="(item,index) in element.options.options" :key="index">
                        <van-checkbox shape="square" :name="item.value">{{ item.label }}
                        </van-checkbox>
                    </van-cell>

                </van-checkbox-group>
            </div>
        </template>

        <template v-if="element.type == 'BaseDateTime'">
            <div class="van_cell">
                <h3 class="van_cell_title">{{ element.name }}</h3>
                <van-datetime-picker
                    v-model="element.options.defaultValue"
                    type="datetime"
                />
            </div>
        </template>

        <!-- <template v-if="element.type == 'date'">
            <div class="van_cell">
                <h3 class="van_cell_title">{{element.name}}</h3>
                <van-datetime-picker
                    v-model="element.options.defaultValue"
                    type="date"
                />
            </div>
        </template> -->

        <template v-if="element.type == 'BaseRate'">
            <van-cell :title="element.name">
                <van-rate
                    v-model="element.options.defaultValue"
                    :size="20"
                    :count="element.options.max"
                    void-icon="star"
                    :disabled="element.options.disabled"
                    :allow-half="element.options.allowHalf"
                />
            </van-cell>
        </template>

        <template v-if="element.type=='BaseSwitch'">
            <van-cell-group>
                <van-switch-cell v-model="element.options.defaultValue" :disabled="element.options.disabled" :title="element.name" />
            </van-cell-group>
        </template>
        <template v-if="element.type=='BaseUpload'">
            <van-cell :title="element.name">
                <van-uploader
                    v-model="element.options.defaultValue"
                    multiple
                    :max-count="2"
                />
            </van-cell>

        </template>
        <template v-if="element.type == 'BaseStep'">
            <van-steps
                :active="2"
                active-icon="success"
                active-color="#38f"
            >
                <van-step v-for="(item,index) in element.options.options" :key="index">{{ item.value }}</van-step>
            </van-steps>
        </template>
        <template v-if="element.type == 'BaseProgress'">
            <van-cell :title="element.name">
                <van-progress :percentage="50" stroke-width="8" />
            </van-cell>
        </template>
        <template v-if="element.type=='BaseSelect'">
            <div class="van_cell">
                <h3 class="van_cell_title">{{ element.name }}</h3>
                <van-dropdown-menu>
                    <van-dropdown-item v-model="element.options.defaultValue" :options="element.options.options" />
                </van-dropdown-menu>
            </div>
        </template>
        <template v-if="element.type=='BaseCountDown'">
            <van-cell :title="element.name">
                <van-count-down
                    :time="element.options.defaultValue"
                />
            </van-cell>
        </template>
        <template v-if="element.type=='BaseMusic'">
            <van-cell>
                <h3>{{ element.name }}</h3>
                <img style="width: 100%" src="../../../assets/music.png" >
            </van-cell>
        </template>
        <template v-if="element.type=='BaseVideo'">
            <van-cell>
                <h3>{{ element.name }}</h3>
                <img style="width: 100%" src="../../../assets/video.png" >
            </van-cell>
        </template>
        <template v-if="element.type=='BaseSwiper'">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(image, index) in element.options.options" :key="index">
                    <img style="width: 100%;" :src="image.src" >
                </van-swipe-item>
            </van-swipe>
        </template>
        <template v-if="element.type=='BaseNavicon'">
            <div class="van_cell">
                <h3 class="van_cell_title" v-if="element.options.options.length==0">{{ element.name }}</h3>
                <div class="van_cell" v-for="(nav, index) in element.options.options" :key="index">
                    <h3 class="van_cell_title">{{ nav.menuName }}</h3>
                    <van-grid :column-num="3">
                        <van-grid-item
                            v-for="(item, childIndex) in nav.childrens"
                            :key="childIndex"
                            :icon="item.imgFileId"
                            :text="item.menuName"
                        />
                    </van-grid>
                </div>
            </div>
        </template>
        <template v-if="element.type=='BaseCitySelect'">
            <div class="van_cell">
                <div class="van_cell_title">{{ element.name }}</div>
                <van-area
                    :area-list="element.options.areaList"
                    :columns-placeholder="['请选择', '请选择', '请选择']"
                />
            </div>
        </template>
        <template v-if="element.type=='BasePickerSelect'">
            <div class="van_cell">
                <div class="van_cell_title">{{ element.name }}</div>
                <van-picker
                    :columns="element.options.options"
                    :default-index="1"
                />
            </div>
        </template>
        <template v-if="element.type == 'BaseAddressEdit'">
            <div class="van_cell">
                <div class="van_cell_title">{{ element.name }}</div>
                <van-address-edit
                    :area-list="element.options.areaList"
                    show-postal
                    show-set-default
                    show-delete
                    show-search-result
                    :search-result="element.options.searchResult"
                    :area-columns-placeholder="['请选择', '请选择', '请选择']"
                />
            </div>
        </template>
        <template v-if="element.type == 'BaseEditor'">
            <vue-html5-editor/>
        </template>
        <template v-if="element.type=='BaseBlank'">
            <div style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;">自定义区域</div>
        </template>

        <el-button title="删除" @click.stop="handleWidgetDelete(index)" class="widget-action-delete" v-if="selectWidget.key == element.key" circle plain type="danger">
            <i class="iconfont2 icon-trash"/>
        </el-button>
        <el-button title="复制" @click.stop="handleWidgetClone(index)" class="widget-action-clone" v-if="selectWidget.key == element.key" circle plain type="primary">
            <i class="iconfont2 icon-icon_clone"/>
        </el-button>
    </el-form-item>
</template>

<script>
import { Field, Stepper, Switch, Slider, Picker, RadioGroup, Radio, Cell, CellGroup, Checkbox, CheckboxGroup, DatetimePicker, SwitchCell, Uploader, Step, Steps, Rate, DropdownMenu, DropdownItem, CountDown, PasswordInput, Area, Progress, AddressEdit, Image, Swipe, SwipeItem, Grid, GridItem } from 'vant'
import VueHtml5Editor from './Editor/VueHtml5Editor'
export default {
    components: {
        [Field.name]: Field,
        [Stepper.name]: Stepper,
        [Switch.name]: Switch,
        [Slider.name]: Slider,
        [Picker.name]: Picker,
        [RadioGroup.name]: RadioGroup,
        [Radio.name]: Radio,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Checkbox.name]: Checkbox,
        [CheckboxGroup.name]: CheckboxGroup,
        [DatetimePicker.name]: DatetimePicker,
        [SwitchCell.name]: SwitchCell,
        [Uploader.name]: Uploader,
        [Step.name]: Step,
        [Steps.name]: Steps,
        [Rate.name]: Rate,
        [DropdownMenu.name]: DropdownMenu,
        [DropdownItem.name]: DropdownItem,
        [CountDown.name]: CountDown,
        [PasswordInput.name]: PasswordInput,
        [Area.name]: Area,
        [Picker.name]: Picker,
        [Progress.name]: Progress,
        [AddressEdit.name]: AddressEdit,
        [Image.name]: Image,
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        [Grid.name]: Grid,
        [GridItem.name]: GridItem,
        VueHtml5Editor
    },
    props: ['element', 'select', 'index', 'data'],
    data() {
        return {
            selectWidget: this.select,
            result: ['a', 'b']
        }
    },
    watch: {
        element(val) {
            console.log(val)
        },
        select(val) {
            this.selectWidget = val
        },
        selectWidget: {
            handler(val) {
                this.$emit('update:select', val)
            },
            deep: true
        }
    },
    mounted() {

    },
    methods: {
        goLink(type, url, query) {
            if (type === 'inline') {
                const param = query ? JSON.parse(query.replace(/'/g, '"')) : null
                this.gotoMyehrPath(url, param)
            } else {
                window.open(url)
            }
        },
        handleSelectWidget(index) {
            this.selectWidget = this.data.list[index]
        },
        handleWidgetDelete(index) {
            if (this.data.list.length - 1 === index) {
                if (index === 0) {
                    this.selectWidget = {}
                } else {
                    this.selectWidget = this.data.list[index - 1]
                }
            } else {
                this.selectWidget = this.data.list[index + 1]
            }

            this.$nextTick(() => {
                this.data.list.splice(index, 1)
            })
        },
        handleWidgetClone(index) {
            let cloneData = {
                ...this.data.list[index],
                options: { ...this.data.list[index].options },
                key: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
            }

            if (this.data.list[index].type === 'radio' || this.data.list[index].type === 'checkbox') {
                cloneData = {
                    ...cloneData,
                    options: {
                        ...cloneData.options,
                        options: cloneData.options.options.map(item => ({ ...item }))
                    }
                }
            }
            if (this.data.list[index].type === 'img' || this.data.list[index].type === 'title') {
                cloneData = {
                    ...cloneData,
                    options: {
                        ...cloneData.options,
                        style: { ...this.data.list[index].options.style }
                    }
                }
            }

            this.data.list.splice(index, 0, cloneData)

            this.$nextTick(() => {
                this.selectWidget = this.data.list[index + 1]
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .widget-form-container .widget-form-list .widget-view{
        padding: 1px 1px 2px;
        border-left: 1px solid transparent;
    }
    .widget-form-container .widget-form-list .widget-view.active{
         border-left: 1px solid transparent;
    }
    .widget-form-container .widget-form-list .widget-view:hover{
        padding: 1px 1px 2px;
        border-left: 1px solid transparent;
    }
    .widget-form-container .widget-form-list .widget-action-clone,.widget-form-container .widget-form-list .widget-action-delete{
        bottom: -16px;
    }
    .van_cell{
        background: #fff;
    }
    .van_cell_title{
        padding-left: 12px;
        border-bottom: 1px solid #f8f8f8;
    }
    .van-cell__title{
        width: 80px;
        flex: none;
    }
    .van-cell_value{
        flex: 1;
        text-align: right;
    }
    .van-progress{
        top: 8px;
    }
</style>
